<div id="xoview-tip-ios7-style-border-1px" class="xpage">
    <header class="bar bar-nav">
        <a href="#home/list1" data-back="home/list1" class="btn btn-link btn-nav pull-left"><span class="icon icon-left-nav"></span></a>
        <h1 class="title">用border-image实现类iOS7的1px底边</h1>
    </header>

    <div class="content">
        <div class="card">
            <div class="yue content-padded">

<h3>使用border-image实现类似iOS7的1px底边</h3>

<p>iOS7已经发布有一段时间，扁平化设计风格有很多值得称赞的地方，其中有很多设计细节都是值得研究的。</p>

<p>首先，来看下面iOS设置的截图中的border：</p>

<p><img src="assets/mtips/pic/tip-bd1px-1.png" alt="tip-bd1px-1"/></p>

<p>从上面的截图可以看到iOS7的设计是非常精细的，border是一根非常细的线。这篇文章将说明如何使用border-image实现iOS7的border效果。</p>

<p>在看下面的内容之前，需要先了解devicePixelRatio和border-image，不熟悉的同学请自行脑补：</p>

<ul class="task-list">
<li><a href="http://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/">设备像素比devicePixelRatio简单介绍</a></li>
<li><a href="http://www.zhangxinxu.com/wordpress/?p=518">CSS3 border-image详解、应用及jQuery插件</a></li>
</ul>

<h3>border属性实现效果</h3>

<p>我们在实现border时通常都是使用<strong>border</strong>属性，如下：</p>

<pre><code class="code">
.border-1px {
    border-width: 1px 0;
    border-style: solid;
    border-color: #333;
}
</code></pre>

<p>显示效果对比：</p>
<p><img src="assets/mtips/pic/tip-bd1px-2.png" alt="tip-bd1px"/></p>

<p>上面这张图片可以看到，在手机上<strong>border</strong>无法达到我们想要的效果。这是因为devicePixelRatio特性导致，iPhone的devicePixelRatio==2，而<strong>border-width: 1px</strong>描述的是设备独立像素，所以，border被放大到物理像素2px显示，在iPhone上就显得较粗。</p>

<h3>使用<strong>border-image</strong>属性实现物理1px</h3>

<p>通常手机端的页面设计稿都是放大一倍的，如：为适应iphone retina，设计稿会设计成640*960的分辨率，图片按照2倍大小切出来，在手机端看着就不会虚化，非常清晰。</p>

<p>同样，在使用<strong>border-image</strong>时，将border设计为物理1px，如下：</p>
<p><img src="assets/mtips/pic/tip-bd1px-3.png" alt="tip-bd1px"/></p>

<p>样式设置：</p>

<pre><code class="code">
.border-image-1px {
    border-width: 1px 0px;
    -webkit-border-image: url("border.png") 2 0 stretch;
    border-image: url("border.png") 2 0 stretch;
}
</code></pre>

<p>显示效果对比：</p>

<p><img src="assets/mtips/pic/tip-bd1px-4.png" alt="tip-bd1px"/></p>
<p>这里在手机上的效果和iOS7已经非常接近了。</p>

<h3>实际示例(devicePixelRatio: <span id="isb1-txt1"></span>)</h3>
<script>
document.getElementById('isb1-txt1').innerHTML = window.devicePixelRatio;
</script>
<style>
    .border-1px {
        border-width: 1px 0;
        border-style: solid;
        border-color: #333;
        height:80px;
        line-height:80px;
        text-align:center;
        margin-bottom:15px;
    }

    .border-image-1px {
        border-width: 1px 0px;
        -webkit-border-image: url("assets/mtips/pic/tip-bd1px-border.png") 2 0 stretch;
        border-image: url("assets/mtips/pic/tip-bd1px-border.png") 2 0 stretch;
        height:80px;
        line-height:80px;
        text-align:center;
        margin-bottom:15px;
    }
</style>
<div class="border-1px">border-1px</div>

<div class="border-image-1px">border-image-1px</div>

<p><strong>Note: </strong>border.png也可以直接使用的base64替代哦</p>

<pre><code class="code">
.border-image-1px {
    border-width: 1px 0px;
    -webkit-border-image: url("") 2 0 stretch;
}
</code></pre>
            
            </div>
        </div>

    </div>
</div>
